/**
 * @file
 * @author ruanairuo(ruanairuo@baijia.com)
 * @date 2020-01-07
 */
import React, {useEffect, useState} from 'react';
import {Row, Col} from 'antd';
import {numberHandle} from '~/utils/number';
import CommonCard from '../../../common/CommonCard';

export default function TransformCard(props) {
    const {loading, dataSource, onDownload, onDetail} = props;
    const [data, setData] = useState([]);
    useEffect(() => {
        if (dataSource && dataSource.length) {
            let data = [...dataSource];
            data = data.map(ele => {
                ele.content = ele.cardValues.map(item =>
                    (
                        <Row style={{width: '100%', textAlign: 'left', color: '#161616'}} key={JSON.stringify(item)}>
                            <Col span={10} style={{marginBottom: 12}}>
                                {item.name}：
                            </Col>
                            <Col span={14}>
                                {numberHandle(item.value, 2)}
                            </Col>
                        </Row>
                    ));
                return ele;
            });
            setData(data);
        }
    }, [dataSource]);
    return (
        <Row>
            {
                data.map(ele => (
                    <CommonCard
                        title={ele.unitName}
                        content={ele.content}
                        span={6}
                        loading={loading}
                        cardId={ele.unitId}
                        key={ele.unitId}
                        onDownload={onDownload}
                        onDetail={onDetail}
                    />
                ))
            }
        </Row>
    );
}
